import React, { Component } from 'react'
import './hotcity.less'
import {baseUrl, hotcity} from '../../../api/base'
export default class Hotcity extends Component{
    state={
        list:[]
    }
    componentDidMount(){
        fetch(baseUrl+hotcity)
        .then(res=>res.json())
        .then(data=>{
            this.setState({
                list:data.list
            })
        })
    }
    selectCity=(cs)=>{
        console.log(cs)
        this.props.setcity(cs)
        window.history.back()
        localStorage.setItem('scity',cs)
    }
    render(){
        return(
            <div className='hotcity'>
                <p className='hotcity-name'>热门城市</p>
                <ul className='hot-city-list'>
                    {this.state.list.map((ele,index)=>(
                        <li 
                            className={ele.id%3===0?'hot-city-item last':'hot-city-item'} key={index }
                            id={ele.id}
                            onClick={this.selectCity.bind(this,ele.name)}
                        >
                            {ele.name}
                        </li>
                    ))}
                </ul>
            </div>
        )
    }
}